import { Component } from 'react'
import { View, Text, Button, Image } from '@tarojs/components'
import './bottom.less'
import Common, { getAllFoodInfo,getEvent } from '../utils/common';
let myEvent = getEvent();
export default class Bottom extends Component {
    constructor(){
        super(...arguments)
        this.state={
          Num:0,
          sendPrice:3,
          takeBySelf:true,
          sendMustPrice:20,
          allPrice:0
        }
    }
    componentDidMount(){//组件挂载后执行
      //要获取整体的存储的菜品数据进行计算
      //获取计算好的设置给state
      let {allPrice,allNum}=getAllFoodInfo();
      this.setState({Num:allNum,allPrice:allPrice});
      myEvent.on("add",()=>{
        let {allPrice,allNum}=getAllFoodInfo();
        this.setState({Num:allNum,allPrice:allPrice});
      });
      myEvent.on("cut",()=>{
        let {allPrice,allNum}=getAllFoodInfo();
        this.setState({Num:allNum,allPrice:allPrice});
      })
    }
  render () {
    let {allPrice,Num,sendPrice,takeBySelf,sendMustPrice}=this.state;
    return (
      <View className='bottom'>
          <View className='bottom_body'>
          {Num>0?<Text className='num'>{Num}</Text>:""}
          <Image className='image' src={Num?require("../../images/full.png"):require("../../images/empty.png")}></Image>
          <View className='center'>{allPrice?<Text className='allPrice'>{"¥"+allPrice}</Text>:<Text>{sendPrice?"另需配送费¥"+sendPrice:""}</Text>}<Text>{"|"+takeBySelf?"支持自取":"不支持自取"}</Text></View>
          <View className='right'>{allPrice>=sendMustPrice?<Text className='goPay'>去结算</Text>:<Text >{"¥"+sendMustPrice}起送</Text>}</View>
          </View>
      </View>
    )
  }
}
